<template>
  <div class="menu">
      <div class="header-search"  @click="clickSearch">
        <search    placeholder="请输入商品名称"> </search>    
      </div>
      <menu-tpl :menuList="getMenuList" @select="selectItem" v-if="getMenuList.length!=0"></menu-tpl>
      <!--列表空提示信息-->
      <n-error v-else>中国农业银行重庆市分行</n-error>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import search from './tpl/search'
import menuTpl from './tpl/menuTpl'
import * as api from './../../api/mainIndex'
import nError from './../error'
 import {mapGetters} from 'vuex'
export default {
  name: 'menuPage',
  created (){
    if(this.getMenuList.length==0){
      this.$store.dispatch('fetchMenuList');
    }
  },
  data () {
    return {
       menuList:[],
    }
  },
  methods:{
        //点击搜索框
      clickSearch (){
          this.$router.push({name:'searchPage'})
      },
      selectItem(val){
        this.$router.push({name:'ProductList',params:{keyCode:val.name}})
      }
  },
  computed:{
    ...mapGetters({
        getMenuList:'getMenuList'
      })
  },
  components:{
    search,
    menuTpl,
    nError
  }
}
</script>


<style scoped lang="scss">
.menu{
    .header-search{
      position:fixed;
      top:0;
      box-sizing:border-box;
      height:1.333333rem;
      width:100%;
      background:#fff;
      padding:.106667rem 0;
      border-bottom:.013333rem solid #ececec;
    }
}
</style>
